import React from 'react';
import {Button, Row, Col, Icon} from 'antd';
import { WeaDialog, WeaSearchGroup, WeaInput, WeaFormItem, WeaCheckbox, WeaTable, WeaError } from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import {WeaMaterialLib} from 'weaPortalPublic';
import Content_imgSlide_img from './Content_imgSlide_img';

// 多图元素详细设置
class Content_imgSlide_detailedSetting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: true,
            showTitle: props.showTitle,
            fontSize: props.fontSize,
            titles: getLabel(507, '图片上传'),
            datas: props.datas,
            selectedDatas: {},
            selectedRowKeys: [],
        };
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.getUuid = this.getUuid.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onChangeBgImage = this.onChangeBgImage.bind(this);
        this.getColumns = this.getColumns.bind(this);
        this.getItems = this.getItems.bind(this);
        this.onDeleteTabs = this.onDeleteTabs.bind(this);
        this.deleteTabs = this.deleteTabs.bind(this);
    }
    onRowSelect(sRowKeys, rows, dataIndex, selectedDatas){
        const newState = {};
        newState.selectedRowKeys = sRowKeys;
        if (selectedDatas) {
            newState.selectedDatas = selectedDatas;
        }
        Object.keys(newState).length > 0 && this.setState(newState);
    }
    getUuid() {
        let s = [];
        let hexDigits = "0123456789abcdef";
        for (let i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        let uuid = s.join("");
        return uuid;
    }
    onChangeBgImage(index,value){
        if(value){
            const { datas } = this.state;
            const length = datas.length;
            let _datas = [...datas];
            let _value = value.split(",")
            if("multiCheck" == index){
                for (var i = 0; i < _value.length; i++) {
                    _datas.push({ key: length + i,imgsrc:_value[i], title:'', imgaddress: '' });
                }

            }else{
                _datas[index].imgsrc = value;
            }
            this.setState({
                datas: _datas
            });
        }
    }
    getColumns(){
        const { datas, fontSize, showTitle } = this.state;
        let _datas = [...datas];
        const columns= [
            {
                title: getLabel(126949, '图片预览'),
                display: 'true',
                key: 'img',
                width: '30%',
                className: 'wea-table-edit-prew',
                render: (text, record, index) => (
                    <Content_imgSlide_img ecId={`${this && this.props && this.props.ecId || ''}_Content_imgSlide_img@krad2p@${index}`} title={(record.title)} imgSrc={record.imgsrc} fontSize={fontSize} showTitle={showTitle}/>
                )
            },
            {
                title: getLabel(386586, '图片标题'),
                display: 'true',
                width: '25%',
                key: 'title',
                className: 'wea-table-edit-title',
                render: (text, record, index) => (
                    <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@4yxhdd@${index}`}
                        //tipPosition='bottom'
                        ref={el => {this[`weaError_${record.key}`] = el}}
                        error='数据为空'>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@5s6wx0@${index}`}
                            value={record.title}
                            viewAttr={showTitle== '1'? 3 : 2}
                            onChange={(value)=>{
                                _datas[record.key].title = value;
                                this.setState({datas: _datas});
                            }}/>
                    </WeaError>
                )
            },
            {
                title: getLabel(22932, '图片链接'),
                display: 'true',
                width: '25%',
                key: 'imgAddress',
                className: 'wea-table-edit-imgAddress',
                render: (text, record, index) => (
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@35g0hm@${index}`}
                        value={record.imgAddress}
                        onChange={(value)=>{
                            _datas[record.key].imgAddress = value;
                            this.setState({datas: _datas});
                    }}/>
                )
            },
            {
                title: getLabel(20001, '上传图片'),
                display: 'true',
                width: '15%',
                className: 'wea-table-edit-upload',
                render: (text, record, index) => (
                    <div className="e9login-bg-images-btns-materiallib">
                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@jeyblr@${index}`} multiCheck={false} onChange={(value)=>this.onChangeBgImage(record.key,value)} type='button'>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@y47bst@${index}`} type="primary">{getLabel(127538, '更改图片')}</Button>
                        </WeaMaterialLib>
                    </div>
                ),
            }
        ]
        return columns;
    }
    getItems(){
        const { showTitle, fontSize } = this.state;
        const items= [
            {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@df8hxz`} 
                label={getLabel(386587, '显示标题栏')}
                labelCol={{span: 8}} 
                wrapperCol={{span: 14}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@irk025`}
                        value={showTitle}
                        display="switch"
                        id='test'
                        style={{display: 'inline'}}
                        onChange={(value)=>this.setState({showTitle: value})}
                    />
                </WeaFormItem>},
            {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vth7tm`}
                label={getLabel(386588, '标题文字大小')}
                labelCol={{span: 8}}
                wrapperCol={{span: 14}}
            >
            <div style={{display: 'inline-block'}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@olr3wx`} value={fontSize} onChange={(value)=>this.setState({fontSize: value})} style={{width: '82px', display: 'inline-block'}}/>
                <div style={{display: 'inline-block', marginLeft: '10px'}}>px</div>
            </div>
            </WeaFormItem>}
        ]
        return items;
    }
    onDeleteTabs() {
        const { selectedRowKeys, datas} = this.state;
        for (let i = 0; i < selectedRowKeys.length; i++) {
            this.deleteTabs(selectedRowKeys[i]);
        }
        this.setState({
            selectedRowKeys: []
        });
    }
    deleteTabs(dataId){
        const { datas, selectedRowKeys } = this.state;
        for (let i = 0; i< datas.length; i++) {
            if (datas[i].key == dataId) {
                datas.splice(i, 1);
                break;
            }
        }
        let datasNew = datas.map((item, idnex) => {
            return {...item, key: idnex}
        });
        this.setState({
            datas:datasNew,
            selectedRowKeys: []
        });
    }
    render() {
        const {visible, eFieldNewDataSource, eFieldNewUsedKeys, searchName, title, items, isModalEdit, datas, titles, selectedDatas, selectedRowKeys } = this.state;
        // 记录选中的行
        const _self = this;
        const rowSelection = {
            onChange(selectedRowKeys) {
                _self.setState({selectedRowKeys: selectedRowKeys})
            },
            selectedRowKeys:selectedRowKeys
        };    
        let datasNew = datas.map((item, idnex) => {
            return {...item, key: idnex}
        });
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@mnyvom`}
                visible={visible}
                title={getLabel(19342, '详细设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 792, height: 490}}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
                hasScroll={true}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@mzadxn`} showGroup={true} title={getLabel(386589, '标题栏设置')} items={this.getItems()} col={1}/>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@dytwzb`} title={titles} needTigger={true} showGroup={true} customComponent={
                    <div style={{display: 'inline-block'}}>
                        <div style={{display: 'inline-block'}}>
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@5d8q5c`} multiCheck={true} onChange={(value)=>this.onChangeBgImage("multiCheck",value)} type='button'>
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v15ymy`} type="primary" style={{borderRadius: 0, padding: '0 4px'}}>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@zrqnl0`} type="plus" style={{color: '#fff'}}/>
                                </Button>
                            </WeaMaterialLib>
                        </div>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w3gsfc`} type="primary" disabled={!(selectedRowKeys && selectedRowKeys.length)} style={{borderRadius: 0, margin: '0 10px', padding: '0 4px'}} onClick={this.onDeleteTabs}>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@s4git7`} type="minus" style={{color: '#fff'}}/>
                        </Button>
                    </div>
                }>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5c57ib`}
                        ref='tableEdit'
                        draggable={true}
                        isModalEdit={isModalEdit}
                        dataSource={datasNew}
                        //title={titles}
                        ref={el => {this.table = el}}
                        rowSelection={rowSelection} 
                        selectedData={selectedDatas}
                        selectedRowKeys={selectedRowKeys}
                        columns={this.getColumns()}
                    />
                </WeaSearchGroup>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ffnp18`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@uc8m9o`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk(){
        const { datas, showTitle, fontSize } = this.state;
        let isPass = true;
        if(showTitle == '1'){
            datas.map((item,index) => {
                if(item.title == '') {
                    this[`weaError_${index}`].showError();
                    isPass = false;
                    return;
                }
            });
        }
        isPass && this.props.onOk(datas, showTitle, fontSize);
    }

    onCancel(){
        this.props.onCancel();
    }
}

export default Content_imgSlide_detailedSetting;
